<template>
  <div>
    <el-button type="text" @click="dialogLoginVisible = true">登陆</el-button>
    <el-button type="text" @click="dialogSignupVisible = true">注册</el-button>

    <el-dialog title="登陆" :visible.sync="dialogLoginVisible" width="30%">
      <el-row>
        <el-col :span="5" :offset="2">账号</el-col>
        <el-col :span="15"><el-input placeholder="请输入账号" v-model="inputNumber"></el-input></el-col>
      </el-row>
      <el-row>
        <el-col :span="5" :offset="2">密码</el-col>
        <el-col :span="15"><el-input placeholder="请输入密码" v-model="inputPassword" type="password" show-password:true></el-input></el-col>
      </el-row>
      <div slot="footer">
        <el-button @click="dialogLoginVisible = false">取 消</el-button>
        <el-button type="primary" @click="login()">登 陆</el-button>
      </div>
    </el-dialog>
    <el-dialog title="注册" :visible.sync="dialogSignupVisible" width="30%">
      <el-row>
        <el-col :span="5" :offset="2">账号</el-col>
        <el-col :span="15"><el-input placeholder="请输入账号" v-model="inputNumber" maxlength="12"></el-input></el-col>
      </el-row>
      <el-row>
        <el-col :span="5" :offset="2">用户名</el-col>
        <el-col :span="15"><el-input placeholder="请输入用户名" v-model="inputName"></el-input></el-col>
      </el-row>
      <el-row>
        <el-col :span="5" :offset="2">密码</el-col>
        <el-col :span="15"><el-input placeholder="请输入密码" v-model="inputPassword" type="password"></el-input></el-col>
      </el-row>
      <el-row>
        <el-col :span="5" :offset="2">密码</el-col>
        <el-col :span="15"><el-input placeholder="请再次输入密码" v-model="confirmPassword" type="password"></el-input></el-col>
      </el-row>
      <div slot="footer">
        <el-button @click="dialogSignupVisible = false">取 消</el-button>
        <el-button type="primary" @click="signup()">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Register",
  data() {
    return {
      dialogLoginVisible: false,
      dialogSignupVisible: false,

      loginState: this.$store.state.isLogin,

      inputNumber: '',
      inputPassword: '',
      inputName: '',

      confirmPassword: ''
    }
  },
  methods: {
    login() {
      var account = this.inputNumber;
      var password = this.inputPassword;
      var name;
      var id;
      axios.post("api/customer/login",{account: account,password: password}).then((res)=>{
        console.log(res.data);
        if (res.data.length === 0) {
          this.$message.error('账号或密码错误');
        } else {
          name = res.data[0].customer_name;
          id = res.data[0].customer_id;

          this.dialogLoginVisible = false;
          this.$store.commit('login');

          this.$store.commit("setInfo",{id: id,name: name,password: password});
          this.$emit('setLoginState');

          this.$message.success('登陆成功');
          this.$notify({
            title: '欢迎回来，'+this.$store.state.name,
            type: 'success'
          });
        }
      })
    },
    signup() {
      var account = this.inputNumber;
      var name = this.inputName;
      var password = this.inputPassword;
      var conpassword = this.confirmPassword;
      axios.post("api/customer/checkAccount", {account: account}).then((res)=>{
        console.log(res.data);
        if (res.data.length !== 0) {
          this.$message.error('该用户已存在');
        } else {
          if (account.length < 12) {
              this.$message.error('账号长度为12');
            } else if (password !== conpassword) {
              this.$message.error('两次输入密码不一致');
            } else {
              axios.post("api/customer/signup",{account: account,password: password,name: name}).then((res)=>{
                console.log(res);
              })
              this.dialogSignupVisible = false;
              this.$message.success('注册成功');
            }
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
